<template>
    <view>
		<view :style="{ paddingTop: `${menuButtonBoundingClientRect.top-60}px`, height: '140rpx', borderRadius: '0 0 35rpx 35rpx', backgroundColor: '#00C657' }">
			<!-- 头部导航栏 -->
			<view class="horizonal-tab">
				<scroll-view scroll-x="false" scroll-with-animation class="scroll-tab">
					<block v-for="(item, index) in dd" :key="index">
						<view class="scroll-tab-item" :class="{ active: tabIndex == index }" @tap="toggleTab(index)">
							{{ item.name }}
							<view class="select"></view>
						</view>
					</block>
				</scroll-view>
			</view>
			<!-- 内容区 -->
			<view>
				<block v-for="(v, index1) in orderList" :key="index1">
					<view class="order" @click="goto(v)">
						<view class="item1" style="display: flex; justify-content: space-between;">
							<view class="order_info">
								<view>下单时间:</view>
								<text style="font-size: 24rpx;color: #999999; margin-left: 20rpx;">{{ v.order_type ? formatDate(v.addtime) : v.createTime }}</text>
							</view>
							<view style="margin-right: 30rpx;color: #00C657;">
								{{
									v.order_type
										? v.status == 1
											? v.is_pay == 0
												? '待付款'
												: '待发货'
											: v.status == 3
											? '待发货'
											: v.status == 4
											? '待自提'
											: v.status == 5
											? '已完成'
											: '已取消'
										: v.status_name
								}}
							</view>
						</view>
						<view class="item2"  >
							<image  v-for="(pic,index) in v.goods_list" :key='index' @click="pic(img.goods_images)" :src="pic.goods_images"  style="width: 156rpx;height: 118rpx;margin-right: 5rpx;" mode="aspectFill"></image>
						</view>
						<view class="item3" style="display: flex; align-content: center;justify-content: space-around;">
							<view style="font-size: 28rpx;color: #1B1B1B; margin-right: 12rpx;">共{{ v.order_type ? v.num : v.quantity }}件商品</view>
							<view style="font-size: 28rpx;color: #1B1B1B;">总计：￥{{ v.order_type ? v.total_fee : v.total }}</view>
							<view
								style="margin-right: 30rpx;margin-left: auto;"
								v-if="v.order_type ? (v.status == 1 ? (v.is_pay == 0 ? true : faslse) : false) : v.order_status_id == 3"
							>
								<text style="width: 145rpx;" @click="CancleOrder(v)">取消订单</text>
								<text style="margin-left: 24rpx;width: 145rpx;background: #00C556;color: #FFFFFF;" @click="topay">立即支付</text>
						    </view>
					    </view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>
<script>
import { Storage } from '@/static/libs/utils';
export default {
	data() {
		return {
			menuButtonBoundingClientRect: wx.getMenuButtonBoundingClientRect(),
			dd: [
				{
					name: '全部',
					id: -1
				},
				{
					name: '待付款',
					id: 3
				},
				{
					name: '待发货',
					id: 1
				},
				{
					name: '待收货/提货',
					id: 4
				},
				{
					name: '已完成',
					id: 6
				},
				{
					name: '售后',
					id: 12
				}
			],
			tabIndex: 0,
			/*, 选中标签栏的序列,默认显示第一个 */
			token: '',
			orderList: [],
			page: 1,
			lat: '',
			lng: '',
			flag: 0, //判断是刷新页面还是下一页
			id: -1,
			// picList:[]
			order_id:0
		};
	},
	onShow() {
		this.goTo();
	},
	methods: {
		goTo() {
			var that = this;
			uni.getStorage({
				key: 'i',
				success: function(res) {
					var i = JSON.parse(res.data);
					that.tabIndex = i;
					uni.removeStorage({
						key: 'i',
						success: function(res) {
							// console.log('success');
						}
					});
					// console.log(that.tabIndex);
				}
			});
		},
		//获取订单列表
		getOrderList(id, flag) {
			this.$request
				.get(`/wxapp.php?from=wxapp&c=entry&a=wxapp&do=index&m=lionfish_comshop&controller=order.orderlist&token=${this.token}&page=${this.page}&order_status=${id}`)
				.then(res => {
					//console.log(res.data[0].order_id)
					if (flag) {
						var obj = res.data.data;
						if (obj) {
							this.orderList = [...this.orderList, ...obj];
						
						}
					} else {
						this.orderList = res.data.data;
						console.log('状态id',res.data.data[0].order_status_id)
				        let order_id = []
						for(var i in res.data.data){
							order_id[i] = res.data.data[i].order_id
						}
						//console.log('订单ididid',order_id[0])
					}
				});
		},
		toggleTab(index) {
			if (index != this.tabIndex) {
				this.page = 1;
				this.flag = 0;
				this.dd.map((v, i) => {
					if (i == index) {
						this.getOrderList(v.id, this.flag);
						this.id = v.id;
					}
				});
				this.tabIndex = index;
			}
		},
		add0(m) {
			return m < 10 ? '0' + m : m;
		},
		formatDate(needTime) {
			//时间戳转换
			//needTime是整数，否则要parseInt转换
			var time = new Date(needTime * 1000);
			var y = time.getFullYear();
			var m = time.getMonth() + 1;
			var d = time.getDate();
			var h = time.getHours();
			var mm = time.getMinutes();
			var s = time.getSeconds();
			return y + '-' + this.add0(m) + '-' + this.add0(d) + ' ' + this.add0(h) + ':' + this.add0(mm) + ':' + this.add0(s);
		},
		goto(v) {
			//跳转到订单详情
			if (v.order_type) {
				//外卖订单详情
				uni.navigateTo({
					url: `/pages/wmOrderDetails/wmOrderDetails?id=${v.id}`
				});
			} else {
				//团购订单详情
				uni.navigateTo({
					url: `../orderDetail/orderDetail?order_id=${v.order_id}`
				});
			}
		},
		//取消订单
		CancleOrder(e){
			this.token = Storage.get('token')
			this.$request.post("/wxapp.php?from=wxapp&c=entry&a=wxapp&do=index&m=lionfish_comshop",
			{
				controller:'order.cancel_order',
				token:this.token,
			    order_id:e.order_id
			}).then(res=>{
				 console.log('取消订单？',res)
				 uni.showModal({
				 	title:'提示',
				 	content:'确定取消订单?'
				 })
			})
			console.log('ssasasasa',e)

		}
	},
	onLoad() {
		// this.getData()
		this.token = Storage.get('token');
		this.lat = Storage.get('latitude');
		this.lng = Storage.get('longitude');
		this.getOrderList(-1, this.flag);
	},
	onReachBottom() {
		this.page += 1;
		this.flag = 1;
		this.getOrderList(this.id, this.flag);
	}
};
</script>
<style lang="scss">
.order {
	width: 690rpx;
	margin: 30rpx;
	background: #ffffff;
	box-shadow: 0rpx 5rpx 20rpx 0rpx rgba(6, 0, 1, 0.1);
	border-radius: 20rpx;
	padding-top: 20rpx;
	.item1 {
		display: flex;
		flex-direction: row;
		margin-left: 20rpx;
		.order_info {
			display: flex;
			margin-left: 14rpx;
			align-items: center;
		}
	}
	.item2 {
		margin-left: 20rpx;
		margin-top: 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 118rpx;
		width: 600rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
	.item3 {
		display: flex;
		flex-direction: row;
		margin-left: 20rpx;
		margin-top: 45rpx;
		padding-bottom: 25rpx;
	}
}
.btn {
	display: flex;
}
.btn button {
	width: 160rpx;
	height: 54rpx;
	font-size: 24rpx;
	border-radius: 27rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sl {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
// .select {
// 	display: none;
// 	width: 40rpx;
// 	height: 8rpx;
// 	margin-left: 10rpx;
// 	background-color: #fff;
// 	border-radius: 4rpx;
// }
.horizonal-tab {
	font-size: 26rpx;
	color: #beebcd;
}
.horizonal-tab .active {
	color: #fff;
	font-size: 28rpx;
	border-bottom: 4rpx solid #fff;
}
.scroll-tab {
	white-space: nowrap;
	/* 必要，导航栏才能横向*/
	cursor: pointer;
	height: 140rpx;
	line-height: 100rpx;
	overflow-x: hidden;
	margin: 0 42rpx;
}
.scroll-tab-item {
	display: inline-block;
	/* 必要，导航栏才能横向*/
	margin-right: 38rpx;
}
</style>
